<template>
  <div class="loginBg" style="min-height: 100vh">
    <a-modal v-model="mVisible" title="免责声明" on-ok="handleOk" width="80%">
      <template slot="footer">
        <a-button key="submit" type="primary" @click="mVisible=false">
          我已了解，继续使用
        </a-button>
      </template>
      <p>用户使用MindFall智能创新引导软件（简称“MindFall”）之前，应当仔细阅读本免责声明。当您开始使用MindFall时，即表示您已充分阅读、理解并同意本免责声明的全部内容。</p>
      <p>
        1. MindFall在创新引导模块提供的相关国家（地区）专利信息均来自国家知识产权局公开信息，仅供参考，MindFall不对上述信息的及时性、准确性、完整性做任何承诺和保证。
      </p>
      <p>
        2. 用户应充分阅读、理解MindFall的数据说明与风险提示，自行承担因使用MindFall提供的相关国家（地区）专利信息引发的全部风险。
      </p>
      <p>
        3. 用户因违法、违规使用MindFall提供的相关国家（地区）专利信息，导致法律纠纷等后果，由用户自行承担相应法律责任，MindFall不承担任何责任。
      </p>
      <p>
        4. MindFall提供的相关国家（地区）专利信息以及检索平台受著作权保护，任何单位或个人不得侵犯知识产权。
      </p>
      <p>
        5. 因不可抗力等因素（不可抗力指不能预见、不能避免并不能克服的客观情况）导致MindFall服务中断，MindFall不承担任何责任。
      </p>
      <p>
        6. 因不可抗力或MindFall不能预见、不能控制的原因（包括但不限于计算机病毒或黑客攻击、通信线路原因等）产生的包括但不限于用户计算机信息和数据的安全问题，用户注册信息的安全问题等给用户造成损失的，MindFall不承担任何责任。
      </p>
      <p>
        7. MindFall对第三方网站不负审查义务，不对第三方网站内容的真实性、合法性、安全性、完整性、准确性负责。用户应当自行、谨慎辨别第三方网站内容与信息，避免发生不必要的损失。用户在第三方网站所可能遭致的意外、疏忽、侵权及其造成的一切损失，均与MindFall无关，MindFall不承担任何直接或者间接法律责任。
      </p>
      <p>
        8. MindFall保留对本免责声明的更新和解释权。
      </p>



    </a-modal>
    <v-btn style="margin-top: 3vh; margin-left: 2vw; padding-left: 7px; font-size: 15px; font-family: BlinkMacSystemFont,sans-serif"
           elevation="5"
           rounded
           @click="backToHome">
      <a-icon type="caret-left" />
      回到首页
    </v-btn>
    <div class="container">
        <!--    登录-->
        <div class="box" :style="{transform: loginTransform}" v-if="!platformUser">
          <div class="form-content">
            <h1 style="margin-bottom: -3vh">欢迎使用MindFall</h1>
            <div>
              <p class="btn-something" style="text-align: center">
                <a-button type="link" @click="mVisible=true" style="font-size: 15px; margin-bottom: 2vh" >免责声明</a-button>
              </p>
              <v-tabs v-model="tab" style="margin-top: -2vh; text-align: center" active-class="activeTab">
                <v-tab style="width: 50%; padding: 0">验证码登录</v-tab>
                <v-tab style="width: 50%; padding: 0">密码登录</v-tab>
              </v-tabs>
            </div>
            <v-tabs-items v-model="tab">
              <!--            验证码登录-->
              <v-tab-item>
                <a-form class="form" style="margin-top: 2vh">
                  <a-form-item>
                    <a-input
                      type="text"
                      placeholder="请输入邮箱"
                      size="large"
                      style="position: relative"
                      v-model="verifyEmail">
                      <a-icon slot="prefix" type="mail" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                    </a-input>
                  </a-form-item>

                  <a-button :disabled="!canVerifyClick"
                            block
                            :loading="loginLoading1"
                            style="margin-bottom: 2vh"
                            @click="getLoginVerificationCode">{{ getVerifyCodeText }}
                  </a-button>

                  <a-form-item>
                    <a-input type="text"
                             oninput="value=value.replace(/[^\d]/g,'')"
                             :max-length="6"
                             placeholder="请输入6位邮箱验证码"
                             v-model="verifyLoginCode"
                             size="large"
                             tyle="position: relative">
                      <a-icon slot="prefix" type="safety-certificate" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                    </a-input>
                  </a-form-item>
                  <a-button  block type="primary" @click="login1" style="font-size: 16px; border-radius: 16px" :loading="loginLoading2">登录</a-button>

                </a-form>
              </v-tab-item>
              <!--            密码登录-->
              <v-tab-item>
                <a-form class="form">
                  <a-form-item>
                    <a-input type="text" placeholder="请输入邮箱" size="large" style="position: relative" v-model="passEmail">
                      <a-icon slot="prefix" type="mail" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                    </a-input>
                  </a-form-item>

                  <a-form-item>
                    <a-input-password type="text" placeholder="请输入密码" size="large" style="position: relative" v-model="passLoginCode" :visibilityToggle="false">
                      <a-icon slot="prefix" type="key" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                    </a-input-password>
                  </a-form-item>
                  <a-button  block type="primary" @click="login2" style="font-size: 16px; border-radius: 16px" :loading="loginLoading3">登录</a-button>

                </a-form>
              </v-tab-item>
            </v-tabs-items>

            <p class="btn-something" style="margin-top: 2vh; margin-bottom: -2vh">
              <a-button style="font-size: 15px;" @click="thirdLogin">智能化创新推广平台&nbsp;---&nbsp;第三方登录</a-button>
            </p>

            <p class="btn-something">
              还没有账号？<a-button type="link" @click="goSignup" style="font-size: 15px;">前往注册</a-button>
            </p>
          </div>
        </div>

        <!--    第三方登录-->
        <div class="box" :style="{transform: loginTransform}" v-else>
          <div class="form-content">
            <div class="avatar">
              <div class="pic"><img :src="thirdUser.profilepic" alt=""></div>
            </div>

            <v-row>
              <v-col cols="2"></v-col>
              <v-col cols="8">
              <span style="white-space: normal; word-wrap: break-word; font-size: 23px; font-weight: bold;">
                <div style="text-align: center;">
                  {{thirdUser.nickname}}
                </div>
              </span>
              </v-col>
              <v-col cols="2"></v-col>
            </v-row>

            <a-form-model :model="thirdForm" class="form" style="margin-top: 2vh" :rules="LoginCodeRules" ref="thirdForm">

              <a-form-model-item prop="email_">
                <a-input type="text" placeholder="请输入邮箱" size="large" style="position: relative" disabled v-if="thirdForm.email_ !== '' && thirdForm.email_ !== null" v-model="thirdForm.email_">
                  <a-icon slot="prefix" type="mail" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input>
              </a-form-model-item>

              <a-form-model-item prop="email">
                <a-input type="text" placeholder="请输入邮箱" size="large" style="position: relative" v-if="thirdForm.email_ === '' || thirdForm.email_ === null" v-model="thirdForm.email">
                  <a-icon slot="prefix" type="mail" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input>
              </a-form-model-item>

              <a-button :disabled="!canPlatFormClick"
                        block
                        :loading="loginLoading4"
                        v-if="thirdForm.email_ === '' || thirdForm.email_ === null"
                        style="margin-bottom: 2vh"
                        @click="getPlatFormVerificationCode">{{ getPlatFormCodeText }}
              </a-button>

              <a-form-model-item v-if="thirdForm.email_ === '' || thirdForm.email_ === null" prop="verifyCode">
                <a-input type="text"
                         oninput="value=value.replace(/[^\d]/g,'')"
                         :max-length="6"
                         placeholder="请输入6位邮箱验证码"
                         size="large"
                         style="position: relative" v-model="thirdForm.verifyCode">
                  <a-icon slot="prefix" type="safety-certificate" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input>
              </a-form-model-item>
              <a-button block type="primary" @click="login3" style="font-size: 16px; border-radius: 16px" v-if="thirdForm.email_ === '' || thirdForm.email_ === null" :loading="loginLoading5">登录</a-button>
              <a-button block type="primary" @click="login4" style="font-size: 16px; border-radius: 16px" v-else :loading="loginLoading6">登录</a-button>

            </a-form-model>
          </div>
        </div>

        <!--    注册-->
        <div class="box" :style="{transform: signUpTransform}">
          <div class="form-content">
            <h1>欢迎注册</h1>
            <a-form-model :model="signUpForm" class="form" style="margin-top: -4vh" :rules="signUpRules" ref="signUpForm">
              <a-form-model-item prop="username">
                <a-input type="text" placeholder="请输入用户名" size="large" style="position: relative" v-model="signUpForm.username" :max-length="8" :suffix="getLimitCount(signUpForm.username, 8)">
                  <a-icon slot="prefix" type="user" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input>
              </a-form-model-item>
              <a-form-model-item prop="email">
                <a-input type="text" placeholder="请输入邮箱" size="large" style="position: relative" v-model="signUpForm.email">
                  <a-icon slot="prefix" type="mail" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input>
              </a-form-model-item>
              <a-button :disabled="!canClick"
                        block
                        :loading="signLoading1"
                        style="margin-bottom: 2vh"
                        @click="getVerificationCode">{{ getSignUpCodeText }}
              </a-button>

              <a-form-model-item prop="verifyCode">
                <a-input type="text"
                         oninput="value=value.replace(/[^\d]/g,'')"
                         :max-length="6"
                         placeholder="请输入6位邮箱验证码"
                         size="large"
                         style="position: relative" v-model="signUpForm.verifyCode">
                  <a-icon slot="prefix" type="safety-certificate" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input>
              </a-form-model-item>
              <a-form-model-item prop="password">
                <a-input-password type="text" placeholder="请输入密码" size="large" style="position: relative" v-model="signUpForm.password" :visibilityToggle="false">
                  <a-icon slot="prefix" type="key" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input-password>
              </a-form-model-item>
              <a-form-model-item prop="checkPass">
                <a-input-password type="text" placeholder="请确认密码" size="large" style="position: relative" v-model="signUpForm.checkPass" :visibilityToggle="false">
                  <a-icon slot="prefix" type="key" style="font-size: 16px; color: #89B8CA; position: absolute; top: 50%; transform: translateY(-50%);"/>
                </a-input-password>
              </a-form-model-item>
              <a-button  block type="primary" @click="SignUp" style="font-size: 16px; border-radius: 16px" :loading="signLoading2">注册</a-button>
            </a-form-model>
            <p class="btn-something">
              已经拥有账号？<a-button type="link" @click="goLogin" style="font-size: 15px;">前往登录</a-button>
            </p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import request from "../utils/request";

  export default {
    mounted() {
      // 防止页面后退
      // console.log(window)
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', this.handleEvent, false);
    },
    destroyed() {
      window.removeEventListener('popstate', this.handleEvent, false);
    },
    created() {
      if (localStorage.getItem('mindfall-login')){
        this.verifyEmail =this.decodeCapture(localStorage.getItem('mindfall-login'))
        this.passEmail =this.decodeCapture(localStorage.getItem('mindfall-login'))
      }
      if (this.$route.query){
        if (this.$route.query.MindFallTicket){
          request.get('/user/getByToken', {
            params:{
              token: this.$route.query.MindFallTicket
            }
          }).then(res => {
            if (res.code === '200'){
              this.thirdUser = res.data
              if (res.data.profilepic === null || res.data.profilepic === ''){
                this.thirdUser.profilepic = 'https://mindfall.cn/systemImg/default-avatar.png'
              }
              if (res.data.nickname === null || res.data.nickname === ''){
                this.thirdUser.nickname = res.data.username
              }
              this.thirdForm.email_ = res.data.email
              if (res.data.email === '' || res.data.email === null){
                this.$message.success({ content: '欢迎使用MindFall智能创新引导工具，检测到您为初次登录，请绑定邮箱后使用',
                  icon: () =>
                    this.$createElement("a-icon", {
                      props: {
                        type: "smile"
                      }
                    }),
                  top: '100px',
                  duration: 5
                })
              }
              this.platformUser = true
            }
            else{
              this.sendWarnMessage(res.msg)
              window.location.href = '/login'
            }
          })
        }
        else this.$router.push('/login')
      }


    },

    data() {
      return{
        // 验证码登录校验内容
        verifyEmail: '',
        verifyLoginCode: '',

        // 密码登录校验内容
        passEmail: '',
        passLoginCode: '',
        mVisible: false,

        signLoading1: false, //注册验证码发送加载
        signLoading2: false, //注册加载
        loginLoading1: false, //验证码登录验证码发送加载
        loginLoading2: false, //验证码登录加载
        loginLoading3: false, //密码登录加载
        loginLoading4: false, //第三方登录验证码加载
        loginLoading5: false, //第三方首次登录加载
        loginLoading6: false, //第三方非首次登录加载

        tab: null,

        thirdUser: {}, //第三方登录（创新平台）用户
        platformUser: false, //是否创新平台用户

        getSignUpCodeText: '获取邮箱验证码', //注册验证码
        canClick: true, //注册验证码是否禁用
        totalTime: 60, //注册验证码倒计时

        getVerifyCodeText: '获取邮箱验证码', //验证码登录验证码
        canVerifyClick: true, //验证码登录验证码是否禁用
        totalVerifyTime: 60, //验证码登录验证码倒计时

        getPlatFormCodeText: '获取邮箱验证码', //平台用户绑定邮箱验证码
        canPlatFormClick: true, //平台用户绑定邮箱验证码是否禁用
        totalPlatFormTime: 60, //平台用户绑定邮箱验证码倒计时

        loginTransform: '', //登录卡片翻转角度
        signUpTransform: 'rotateY(-108deg)', //注册卡片翻转角度

        signUpForm: {username: ''}, //注册表单
        thirdForm: {}, //第三方登录表单

        LoginCodeRules: {
          email: [
            {
              required: true,
              message: '请输入正确邮箱',
              trigger: 'blur',
              pattern: /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/
            }
          ],
          verifyCode: [{ required: true, message: '请输入验证码', trigger: 'change' }],
        }, //第三方绑定邮箱 验证码登录表单规则

        signUpRules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
          verifyCode: [{ required: true, message: '请输入验证码', trigger: 'change' }],
          email: [
            {
              required: true,
              message: '请输入正确邮箱',
              trigger: 'blur',
              pattern: /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/
            }
          ],
          password: [
            {
              required: true,
              message: '密码至少包含数字和英文，长度6-20',
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              trigger: 'blur'
            }],
          checkPass: [
            {
              required: true,
              message: '密码至少包含数字和英文，长度6-20',
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              trigger: 'blur'
            }],
      }, //注册表单规则
      }
    },
    methods: {
      gotoLogin(){
        //返回错误信息
        this.$message.warn({ content: "即将前往智能化创新推广平台",
          icon: () =>
            this.$createElement("a-icon", {
              props: {
                type: "bulb"
              }
            }),
          top: '100px',
          duration: 3
        })
        let sourceUrl = 'https://mindfall.cn/login'
        window.location.href = 'http://60.205.125.169/dashboard/analysis?redirectTool=' + sourceUrl
      },
      checkEmail(email){
        return !(email === '' || email === null || email === undefined || /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/.test(email) === false);
        },

      // 解码邮箱异常捕获
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {
          localStorage.removeItem('mindfall-login')
          this.$router.push('/login')
        }
      },

      // 字数限制显示
      getLimitCount(str, count){
        return str.length + '/' + count
      },

      // 返回首页
      backToHome() {
        window.location.href = '/'
      },

      // 禁止页面后退
      handleEvent() {
        history.pushState(null, null, document.URL);
      },

      // 注册验证码倒计时
      getVerificationCode () {
        if (this.checkEmail(this.signUpForm.email)  === false){
          this.sendWarnMessage('邮箱格式不正确')
          return
        }
        this.signLoading1 = true
        request.get('/user/getCode', {
          params:{
            to: this.signUpForm.email
          }
        }).then(res => {
          this.signLoading1 = false
          if (res.code === '200'){
            this.sendSuccessMessage('验证码已发送到您的邮箱，三分钟内有效。')
            if (!this.canClick) return
            this.canClick = false
            this.getSignUpCodeText = this.totalTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalTime--
              this.getSignUpCodeText = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                window.clearInterval(clock)
                this.getSignUpCodeText = '重新发送验证码'
                this.totalTime = 60
                this.canClick = true
              }
            },1000)
          }
          else
            this.sendWarnMessage(res.msg)
        })
      },

      // 验证码登录倒计时
      getLoginVerificationCode () {
        if (this.checkEmail(this.verifyEmail) === false){
          this.sendWarnMessage('邮箱格式不正确')
          return
        }
        this.loginLoading1 = true
        request.get('/user/getCode', {
          params:{
            to: this.verifyEmail
          }
        }).then(res => {
          if (res.code === '200'){
            this.loginLoading1 = false
            this.sendSuccessMessage('验证码已发送到您的邮箱，三分钟内有效。')
            if (!this.canVerifyClick) return
            this.canVerifyClick = false
            this.getVerifyCodeText = this.totalVerifyTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalVerifyTime--
              this.getVerifyCodeText = this.totalVerifyTime + 's后重新发送'
              if (this.totalVerifyTime < 0) {
                window.clearInterval(clock)
                this.getVerifyCodeText = '重新发送验证码'
                this.totalVerifyTime = 60
                this.canVerifyClick = true
              }
            },1000)
          }
          else
            this.sendWarnMessage(res.msg)
        })

      },

      // 邮箱绑定验证码倒计时
      getPlatFormVerificationCode () {
        if (this.checkEmail(this.thirdForm.email) === false){
          this.sendWarnMessage('邮箱格式不正确')
          return
        }
        this.loginLoading4 = true
        request.get('/user/getCode', {
          params:{
            to: this.thirdForm.email
          }
        }).then(res => {
          if (res.code === '200'){
            this.loginLoading4 = false
            this.sendSuccessMessage('验证码已发送到您的邮箱，三分钟内有效。')
            if (!this.canPlatFormClick) return
            this.canPlatFormClick = false
            this.getPlatFormCodeText = this.totalPlatFormTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalPlatFormTime--
              this.getPlatFormCodeText = this.totalPlatFormTime + 's后重新发送'
              if (this.totalPlatFormTime < 0) {
                window.clearInterval(clock)
                this.getPlatFormCodeText = '重新发送验证码'
                this.totalPlatFormTime = 60
                this.canPlatFormClick = true
              }
            },1000)
          }
          else
            this.sendWarnMessage(res.msg)
        })

      },

      // 卡片翻转 注册
      goSignup(){
        this.loginTransform = "rotateY(180deg)"
        this.signUpTransform = "rotateY(0deg)"
      },

      // 卡片翻转 登录
      goLogin(){
        this.loginTransform = "rotateY(0deg)"
        this.signUpTransform = "rotateY(-180deg)"
      },

      // 注册
      SignUp(){
        if (this.signUpForm.password !== this.signUpForm.checkPass){
          this.sendWarnMessage('两次密码输入必须一致')
          return
        }
        this.$refs['signUpForm'].validate(valid => {
          if (valid){
            this.signLoading2 = true
            let signDTO = {}
            signDTO.username = 'tool_' + this.signUpForm.username
            signDTO.nickname = this.signUpForm.username
            signDTO.email = this.signUpForm.email
            signDTO.code = this.signUpForm.verifyCode
            signDTO.password = this.signUpForm.password
            request.post('/user/register', signDTO).then(res =>{
              this.signLoading2 = false
              if (res.code === '200'){
                this.loginTransform = "rotateY(0deg)"
                this.signUpTransform = "rotateY(-180deg)"
                this.$refs['signUpForm'].resetFields()
                this.getSignUpCodeText = '获取邮箱验证码'
                this.canClick = true
                this.sendSuccessMessage('注册成功，欢迎使用。')
              }
              else {
                this.sendWarnMessage(res.msg)
              }
            })

          }
        })
      },

      // 跳转 前往第三方平台
      thirdLogin(){
        this.gotoLogin()
      },
      // 验证码登录
      login1(){
        if (this.checkEmail(this.verifyEmail) && this.verifyLoginCode !== ''){
          this.loginLoading2 = true
          request.get('/user/loginByCode',{
            params: {
              email: this.verifyEmail,
              code: this.verifyLoginCode
            }
          }).then(res => {
            this.loginLoading2 = false
            if (res.code === '200'){
              this.sendSuccessMessage('登录成功，欢迎使用！')
              localStorage.setItem("mindfall-ticket", res.data.token)
              localStorage.setItem('mindfall-login', window.btoa(window.encodeURIComponent(res.data.email)))
              if (res.data.role === 'ROLE_ADMIN'){
                localStorage.setItem('_u', 'Porn6-413-Admin')
                window.location.href = '/manager'
              }
              else {
                localStorage.setItem('_u', 'user')
                window.location.href = '/'
              }
            }
            else
              this.sendWarnMessage(res.msg)
          })
        }
        else
          this.sendWarnMessage('请正确填写登录信息')
      },
      // 密码登录
      login2(){
        if (this.checkEmail(this.passEmail) && this.passLoginCode !== ''){
            this.loginLoading3 = true
            request.get('/user/loginByPassword', {
              params: {
                email: this.passEmail,
                password: this.passLoginCode
              }
            }).then(res => {
              this.loginLoading3 = false
              if (res.code === '200'){
                // console.log(res.data)
                this.sendSuccessMessage('登录成功，欢迎使用！')
                localStorage.setItem("mindfall-ticket", res.data.token)
                localStorage.setItem('mindfall-login', window.btoa(window.encodeURIComponent(res.data.email)))
                if (res.data.role === 'ROLE_ADMIN'){
                  localStorage.setItem('_u', 'Porn6-413-Admin')
                  window.location.href = '/manager'
                }
                else {
                  localStorage.setItem('_u', 'user')
                  window.location.href = '/'
                }
              }
              else
                this.sendWarnMessage(res.msg)
            })
          }
        else
          this.sendWarnMessage('请正确填写登录信息')

      },

      // 第三方首次登录
      login3(){
        this.$refs['thirdForm'].validate(valid => {
          if (valid){
            this.loginLoading5 = true
            request.get('/user/firstLoginFromPlatform',{
              params: {
                email: this.thirdForm.email,
                code: this.thirdForm.verifyCode,
                username: this.thirdUser.username,
              }
            }).then(res => {
              this.loginLoading5 = false
              if (res.code === '200'){
                this.sendSuccessMessage('登录成功，欢迎使用！')
                localStorage.setItem("mindfall-ticket", res.data.token)
                localStorage.setItem('mindfall-login', window.btoa(window.encodeURIComponent(res.data.email)))
                if (res.data.role === 'ROLE_ADMIN'){
                  localStorage.setItem('_u', 'Porn6-413-Admin')
                  window.location.href = '/manager'
                }
                else {
                  localStorage.setItem('_u', 'user')
                  window.location.href = '/'
                }
              }
              else
                this.sendWarnMessage(res.msg)
            })

          }
        })
      },
      // 第三方非首次登录
      login4(){
        this.loginLoading6 = true
        request.get('/user/loginFromPlatform', {
          params: {
            username: this.thirdUser.username,
            email: this.thirdForm.email_,
          }
        }).then(res => {
          this.loginLoading6 = false
          if (res.code === '200'){
            this.sendSuccessMessage('登录成功，欢迎使用！')
            localStorage.setItem("mindfall-ticket", res.data.token)
            localStorage.setItem('mindfall-login', window.btoa(window.encodeURIComponent(res.data.email)))
            if (res.data.role === 'ROLE_ADMIN'){
              localStorage.setItem('_u', 'Porn6-413-Admin')
              window.location.href = '/manager'
            }
            else {
              localStorage.setItem('_u', 'user')
              window.location.href = '/'
            }
          }
          else
            this.sendWarnMessage(res.msg)
        })
      }
    }

  }
</script>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    background-color: #f0f5f5;
  }

  body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #89B8CA;
    clip-path: circle(20% at 100% 0);
  }

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22rem;
    height: 38rem;
    perspective: 1500px;
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
  }

  .box {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 10px 10px 5px #888888;
    width: 22rem;
    height: 38rem;
    border-radius: 30px;
    backface-visibility: hidden;
    transition: all 0.5s;
    user-select: none;
  }

  .container .form-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 0 1px #89B8CA;
    border-radius: 30px;
    background-color: #fff;
  }

  .container .form-content .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .container .form-content .avatar .pic {
    position: relative;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #89B8CA;
  }

  .container .form-content .avatar .pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .container .form-content h1 {
    font-size: 1.6rem;
    color: #89B8CA;
    font-weight: bold;
  }

  .container .form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .container .form input {
    width: 16rem;
    padding: 0.8rem 0.8rem 0.8rem 3rem;
    outline: none;
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    margin: 5px;
  }

  .container .form .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
  }

  .container .form .btn button {
    text-transform: uppercase;
    padding: 8px;
    border: none;
    outline: none;
    background-color: #89B8CA;
    color: #fff;
    width: 12rem;
    border-radius: 30px;
    cursor: pointer;
  }

  .container .btn-something {
    color: #888;
    font-size: 15px;
  }

  .container .btn-something span {
    color: #89B8CA;
    cursor: pointer;
    font-weight: 500;
  }
  .activeTab{
    font-weight: bold;
  }
  .loginBg{
    background-color: #89B8CA;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23AEDDDB'/%3E%3Cstop offset='1' stop-color='%2389B8CA'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;

  }
</style>

